import React, { useCallback, useEffect, useMemo, useState } from "react";
import styles from "./styles.module.scss";
import { useFileApi } from "./Context";
import { Service } from "@/lib";
import { message, Progress } from "antd";
const DiskInfo = () => {
    const fileApi = useFileApi();
    const serviceApi = Service.useService();
    const [ diskInfo, setDiskInfo ] = useState<any>({});
    const refreshDiskInfo = useCallback(() => {
        serviceApi.send({
            endPoint: "files.diskInfo"
        }).then((resp: any) => {
            setDiskInfo(resp.data);
        }).catch((err) => {
            message.error(err.message || "获取磁盘信息失败");
        })
    }, []);
    const percent = useMemo(() => parseFloat((diskInfo.percent || "0").replace("%", "")), [diskInfo])
    useEffect(() => {
        const rmDiskInfoRefresh = fileApi.on("onUpdateSize", () => {
            refreshDiskInfo();
        });
        refreshDiskInfo();
        return () => {
            rmDiskInfoRefresh();
        };
    }, []);
  return <div className={styles.diskInfo}>
    <span>已使用：{diskInfo.usedSize} / 总容量：{diskInfo.totalSize}</span>
    <Progress percent={percent} status={percent < 50 ? "active" : (percent <90 ? "normal" : "exception")}/>
  </div>;
};

export default DiskInfo;
